Applying custom rendering to 2D nodes

Apply custom rendering to 2D nodes to create post-processing effects. For example, you can convert color images in a 2D node to grayscale.

To apply custom rendering to a 2D node, use the Composition Brush property to compose the node on the screen with a Material Brush, and enable the ForceComposition property.

To apply custom rendering to a 2D node:

Create a material type that defines the material with which you want to apply custom rendering.
For example, to create a material type that converts color to grayscale:
1. In the Library press Alt and right-click Materials and Textures and select Material Type.
2. In the Library > Materials and Textures expand the material type you created, double-click the Vertex Shader to open it in the Shader Source Editor, replace the existing shader code with this code, and save the shader.
```
attribute vec3 kzPosition;
attribute vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

varying mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}
```
3. Open the Fragment Shader, replace the existing shader code with this code, and save the shader.
  In the shader use the Kanzi default uniform ContentTexture which defines the texture that the rendered node provides when rendering. See Shader uniforms.
```
uniform sampler2D ContentTexture;
varying mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    // Use this algorithm to convert the colors in the texture used by
    // the Image node to grayscale.
    float grayscale = dot(texture2D(ContentTexture, vTexCoord).rgb, vec3(0.21, 0.72, 0.07));
    gl_FragColor = vec4(grayscale, grayscale, grayscale, 1.0);
}
```
Create a material and set it to use the material type you created in the previous step:
1. In the Library press Alt and right-click Materials and Textures and select Material.
2. In the Properties set the Material Type property to the material type you created in the previous step.
In the Library press Alt and right-click Materials and Textures, select Material Brush, and set it to use the material you created in the previous step.
In the Project create or select the 2D node to which you want to apply the material you created.
For example, create a Stack Layout 2D node and inside the Stack Layout 2D node create some Image nodes.
In the Properties add and set:
- Composition Brush to the material brush that uses the material you want to apply to that node
- ForceComposition to enabled

Applying custom rendering to 2D nodes

See also